<template>

    <n-modal :on-after-leave="modelClose" v-model:show="modalShow" class="popcard" preset="card" title="发送给:"
        size="huge" :bordered="false">
        <n-spin :show="uploadLoading">
            <div class="target">
                <div class="top">
                    <img src="@/assets/avator.jpg" class="avator" alt="" />
                    <div style="font-weight: bolder;">{{ item.userName }}</div>
                </div>
                <n-divider />
                <div class="filelistbox">
                    <div v-for="(e, index) in (fileList as any)" class="itembox" style="
              ">
                        <div class="item">
                            <img :src="e.preicon" class="fileimg" alt="" />
                            <div class="filename">
                                {{ e.file.name }}
                            </div>
                        </div>
                        <n-button @click="handlePreview(e)" v-if="
                            [
                                'word',
                                'video',
                                'image',
                                'textFile',
                                'pdf',
                                'ppt',
                                'excel',
                            ].includes(e.type)
                        " style="margin-left: 5px" size="small" type="info">
                            预览
                        </n-button>
                        <n-button style="margin-left: 5px" @click="handleDelete(index)" size="small" type="error">
                            删除
                        </n-button>
                    </div>
                </div>
                <n-input style="font-size: 14px; margin-top: 10px; text-indent: 1em" v-model:value="fileText"
                    placeholder="给朋友留言" />
            </div>
        </n-spin>
        <template #footer>
            <div style="
            width: 100%;
            justify-content: space-around;
            margin: 0 auto;
            display: flex;
          ">
                <n-button @click="handleFileSend()" :loading="uploadLoading" type="primary">
                    发送({{ fileList.length }})
                </n-button>
                <n-button @click="modalShow = false" type="tertiary">
                    取消
                </n-button>
            </div>
        </template>

    </n-modal>

</template>

<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    },
    fileList: {
        type: Array,
        default: () => []
    },
})
const emits = defineEmits(['handlePreview', 'handleDelete', 'handleFileSend', 'handleModelClose'])
const fileText = ref<string>("")
const modalShow = ref<Boolean>(false)
const modelClose = () => {
    emits("handleModelClose")
}
const uploadLoading = ref<boolean>(false)
const handlePreview = (e?: any, type?: any) => {
    let preViewItem = {} as any
    if (!type) {
        preViewItem = e;
    } else {
        preViewItem = {
            type: e.type,
            blobUrl: e.content,
        };
    }
    emits("handlePreview", preViewItem);
};
const handleDelete = (i: number) => {
    emits("handleDelete", i);
};

const handleFileSend = () => {
    emits("handleFileSend", {
        fileText: fileText.value,
        fileList: props.fileList,
    });
};

defineExpose({
    modalShow,
    fileText,
    uploadLoading,
    // handlePreview,
    // handleDelete,
    // handleFileSend,
    // fileText,
    // uploadLoading,
    // preViewItem,
});

</script>

<style lang="scss" scoped>
.popcard {
    width: 100%;

    .filelistbox {
        max-height: 300px;
        overflow-y: scroll;
        margin-bottom: 10px;

        .itembox {
            display: flex;
            align-items: center;
            margin-top: 10px;
            justify-content: space-between;

            .item {
                display: flex;
                flex: 1;

                align-items: center;

                .fileimg {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    margin-right: 10px;
                }

                .filename {
                    font-size: 14px;
                    color: #333;
                    max-width: 200px;
                    max-height: 1.5em;
                    /* 最大高度，等于一行的高度 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    display: -webkit-box;
                    /* 使用弹性盒模型 */
                    line-clamp: 1;
                    -webkit-line-clamp: 1;
                    /* 限制行数为1 */
                    -webkit-box-orient: vertical;
                    overflow-y: hidden;
                    /* 垂直排列 */
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .target {
        .top {
            display: flex;
            align-items: center;

            .avator {
                width: 38px;
                height: 38px;
                border-radius: 4px;
                margin-right: 20px;
            }
        }

    }
}
</style>